<template>
	<view>
			<view class="bg" :style="{height:BarTop + BarHeight + 11 + 'px'}"></view>
			<view class="order-nav" :style="{top:BarTop + 'px',height:BarHeight + 'px',lineHeight:BarHeight + 'px'}">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/back.png" mode="" class="order-nav-img" @click="backNav"></image>
				<view class="search">
					<u-search 
					placeholder="输入您想兑换的商品" 
					bg-color='#F9FFFD' 
					:clearabled='false' 
					v-model="obj.search" 
					:show-action='false'
					border-color='#3DC772'
					@search="Search"
					></u-search>
					<view class="searchbtn"  @click.stop="Search()">
						搜索
					</view>
				</view>
			</view>
			<block v-if="flag">
				<view class="main-title" :style="{marginTop:BarTop + 58 + 'px'}">
					<view>搜索历史</view>
					<u-icon name="trash-fill" color="#f1f1ff1" size="28" @tap="removeHistory"></u-icon>
				</view>
				<view class="main">
					<view class="main-histoy" v-for="(item, index) in historyList" :key="item.keywords" @tap="historyTap(item.keywords)">{{ item.keywords }}</view>
				</view>
			</block>
			<block v-else>
				<view class="top-tabs" :style="{top:BarTop + BarHeight + 11 + 'px'}">
					<view class="tabs-box" @click="price">
						价格
						<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/donw.png" mode="" style="width: 32rpx;height: 32rpx;" v-if="priceflag"></image>
						<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Group%201817%402x.png" mode="" style="width: 32rpx;height: 32rpx;" v-else></image>
					</view>
					<view class="tabs-box" @click="num">
						销量
						<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/donw.png" mode="" style="width: 32rpx;height: 32rpx;" v-if="numflag"></image>
						<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Group%201817%402x.png" mode="" style="width: 32rpx;height: 32rpx;" v-else></image>
					</view>
					<view class="tabs-box">
						筛选
					</view>
				</view>
				<!-- 身体 -->
				<view class="shop-main" >
					<view :style="{width:'100%',height:BarTop + BarHeight + 58 + 'px'}"></view>
					<view class="shopbox">
						<view class="shopbox1" v-for="(item,index) in list" :key="index" @click="GoshopInfo(item)">
							<image :src="item.image" mode="" style="width: 100%;height: 344rpx;" class="shopimg"></image>
							<view class="shopsp">
								{{item.title}}
							</view>
							<view class="shopprice">
								<text style="font-size: 28rpx;color: #36BE6A;margin-right: 5rpx;">券</text>{{item.price}}
							</view>
							<view class="shopbtn">
								立即兑
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
			</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				BarTop:'',
				BarHeight:'',
				
				flag:true,
				priceflag:true,
				numflag:true,
				status: 'loadmore',
				flowList: [],
				list: [],
				page:1,
				pagesize:10,
				obj:{
					search:'',
				},
				historyList: [], //历史记录列表
			}
		},
		onReady() {
			this.historyList = uni.getStorageSync('search:history');
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = ++ this.page;
			let page = {
				page:this.page,
				pagesize:this.pagesize
			}
			this.$u.api.shop.getGoods(this.obj,page).then(res =>{
				if(res.code == 1){
					this.list = [...this.list,...res.data.data]
					if(res.data.data.length == 0){
						this.status = 'nomore'
					}
				}
			})
		},
		
		methods:{
			 GoshopInfo(item){
				uni.navigateTo({
					url:`./product?id=${item.id}`
				}) 
			 },
			price(){
				this.priceflag = !this.priceflag
				if(this.priceflag){
					this.obj = {
						search:this.obj.search,
						sort:'price',
						order:'desc'
					}
					
					this.Search(this.obj)
				}else{
					this.obj = {
						search:this.obj.search,
						sort:'price',
						order:'asc'
					}
					this.Search(this.obj)
				}
				 
			},
			num(){
				this.numflag = !this.numflag
				if(this.numflag){
					this.obj = {
						search:this.obj.search,
						sort:'sales',
						order:'desc'
					}
					this.Search(this.obj)
				}else{
					this.obj = {
						search:this.obj.search,
						sort:'sales',
						order:'asc'
					}
					this.Search(this.obj)
				}
				
			},
		
			Search(obj){
				if(this.obj.search==''){
					uni.showToast({
						icon: 'none',
						title: '请输入搜索内容'
					})
					return
				}
				this.setHistory(this.obj.search);
				let page= {
					page:1,
					pagesize:10
				}
				this.$u.api.shop.getGoods(obj = this.obj,page).then(res =>{
					this.flag = false
					if(res.code == 1){
						this.list = res.data.data
						if(res.data.total <=10){
							this.status = 'nomore'
						}
					}
				})
			},
			backNav(){
				uni.navigateBack({
				    delta: 1,
				})
			},
			setHistory(text) {
				let historyList = uni.getStorageSync('search:history');
				this.historyList = [];
				this.historyList = historyList; 
				let searchHistory = historyList;
				if (!searchHistory) searchHistory = [];
				let serachData = {};
				if (typeof text === 'string') {
					serachData = { keywords: text };
				} else {
					serachData = text;
				}
				// 判断数组是否存在，如果存在，那么将放到最前面
				for (var i = 0; i < searchHistory.length; i++) {
					if (searchHistory[i].keywords === serachData.keywords) {
						searchHistory.splice(i, 1);
						break;
					}
				}
				searchHistory.unshift(serachData);
				uni.setStorage({
					key: 'search:history',
					data: searchHistory
				});
			},
			// 清空历史数据
			removeHistory() {
				uni.showModal({
					title: '提示',
					content: '是否清理全部搜索历史？该操作不可逆。',
					success: res => {
						if (res.confirm) {
							this.historyList = [];
							uni.removeStorage({ key: 'search:history' });
						}
					}
				});
			},
			historyTap(keyword){
				this.obj.search = keyword
				this.Search()
			},
		},
		
		onShow() {
			
		},
		onLoad() { 
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			   this.BarTop = menuButtonInfo.top;
			   this.BarHeight = menuButtonInfo.height;
			   
		}
	}
</script>

<style>
	page{
		background-color: white;
	}
	.bg{
		width: 100%;
		z-index: 10;
		background-color: white;
		position: fixed;
		top: 0;
	}
	.order-nav{width: 100%;position: fixed;top:0;color: black;z-index: 999;display: flex;background-color: white;}
	.order-nav-img{width: 40rpx;height: 40rpx;position: absolute;left: 0rpx;padding: 15rpx;z-index: 999;}
	.search{
		width: 472rpx;
		height: 100%;
		/* background-color: yellowgreen; */
		position: absolute;
		left: 74rpx;
	}
	.shopbox{
		/* border:1px red solid; */
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.shopbox1{
		width: 334rpx;
		height: 480rpx;
		margin-top: 30rpx;
		/* border: 1px red solid; */
		border-radius: 16rpx;
		background-color: white;
		position: relative;
	}
	.shopprice{
		font-size:36rpx;
		color: #36BE6A;
		/* margin-top: 10rpx; */
		margin-left: 16rpx;
		position: absolute;
		bottom: 5rpx;
	}
	.shopimg{
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}
	.shopbtn{
		width: 118rpx;
		height: 46rpx;
		border-radius: 23rpx;
		text-align: center;
		line-height: 46rpx;
		color: white;
		font-size: 24rpx;
		background-color: #36BE6A;
		position: absolute;
		bottom: 5rpx;
		right: 16rpx;
	}
	.search1{
		width: 100%;
		height: 100%;
	}
	.shopsp{
		width: 302rpx;
		font-size: 24rpx;
		color: #1A1B24;
		margin-top: 10rpx;
		margin-left: 16rpx;
		 overflow:hidden;
		  text-overflow: ellipsis;
		  -webkit-line-clamp: 2;
		  display: -webkit-box;
		  -webkit-box-orient: vertical;
	}
	.searchbtn{
		width: 102rpx;
		height: 52rpx;
		background-color: #3DC772;
		border-radius: 24rpx;
		position: absolute;
		right: 6rpx;
		top: 6rpx;
		text-align: center;
		line-height: 52rpx;
		color: white;
		font-size: 24rpx;
		z-index: 999;
	}
	.main-title{
		margin-left: 30rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 30rpx;
	}
	.main{
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
		/* background-color: #3DC772; */
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.main-histoy{
		padding: 20rpx 30rpx;
		color: #6A6A6A;
		font-size: 28rpx;
		text-align: center;
		border-radius: 50rpx;
		margin-bottom: 20rpx;
		background-color: #F8F8F8;
		margin-right: 20rpx;
	}
	.top-tabs{
		width: 750rpx;
		height: 92rpx;
		position: fixed;
		background-color: white;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 999;
	}
	.tabs-box{
		height: 92rpx;
		/* line-height: 28rpx; */
		font-size: 28rpx;
		color: #69696B;
		display: flex;
		align-items: center;
		/* border: 1px red solid; */
	}
	.shop-main{
		width: 750rpx;
		min-height: 100vh;
		background-color: #F5F5F5;
	}
</style>